<template>
	<div class="container">
		<h3>动态更新视图</h3>
		<nav>
			<a href="#" @click.prevent="page = 'hutao-page'">胡桃</a> /
			<a href="#" @click.prevent="page = 'ganyu-page'">甘雨</a> /
			<a href="#" @click.prevent="page = 'zhongli-page'">钟离</a>
		</nav>
		<component :is="page"></component>
	</div>
</template>

<script>
export default {
	name: 'UpdateView',
	components: {
		'hutao-page': {
			render(h) {
				return h('div', '胡桃');
			},
		},
		'ganyu-page': {
			render(h) {
				return h('div', { class: 'twtStyle' }, [
					h('h3', '甘雨'),
					h('img', {
						attrs: {
							src: 'https://bkimg.cdn.bcebos.com/pic/0824ab18972bd40735fa021c9fdc89510fb30e24a38e?x-bce-process=image/format,f_auto/quality,Q_70/resize,m_lfit,limit_1,w_536',
							alt: '钟离图片',
						},
						class: 'zhongli-image',
					}),
				]);
			},
		},
		'zhongli-page': {
			render(h) {
				return h('div', '钟离');
			},
		},
	},
	data() {
		return {
			page: 'hutao-page',
		};
	},
};
</script>

<style scoped>
.container {
	margin-top: 20px;
	padding: 0 20px;
}

.twtStyle {
	background-color: aqua;
}
.twtStyle h3 {
	color: white;
}
</style>
